<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日销售额" value="30,346,799">
        <div>
          <div class="today-sales">
            日同比 -19.16%
            <el-icon size="small" color="red"><CaretBottom /></el-icon>
          </div>
          <div class="today-sales">
            周同比 65.67%
            <el-icon size="small" color="green"><CaretTop /></el-icon>
          </div>
        </div>
        <template #footer>
          <div class="">昨日销售额 ￥360,000,000</div>
        </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日销售额" value="30,346,799">
        <div class="slot-wrap">
          <LineChart />
        </div>
        <template #footer>
          <div class="">昨日销售额 ￥360,000,000</div>
        </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日交易用户数" value="182,458">
        <div class="slot-wrap">
          <BarChart />
        </div>
        <template #footer>
          <div class="">退货率 5.91%</div>
        </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="累计用户数" value="17,182,458">
        <div class="slot-wrap">
          <ProgressChart />
        </div>
        <template #footer>
          <div class="progress-footer">
            <div class="today-footer">
              日同比 -19.16%
              <el-icon size="small" color="red"><CaretBottom /></el-icon>
            </div>
            <div class="today-footer">
              周同比 65.67%
              <el-icon size="small" color="green"><CaretTop /></el-icon>
            </div>
          </div>
        </template>
      </CommonCard>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: "HomeTop",
};
</script>
<script lang="ts" setup>
import CommonCard from "./CommonCard.vue";
import LineChart from "./LineChart.vue";
import BarChart from "./BarChart.vue";
import ProgressChart from "./ProgressChart.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
</script>

<style scoped>
.today-sales {
  font-size: 14px;
  margin: 5px 0;
}
.slot-wrap {
  width: 100%;
  height: 100%;
}
.progress-footer {
  display: flex;
}
.today-footer{
  margin-right: 5px;
}
</style>